<template>
  <div class="app-container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="26">
        <!-- 搜索框 -->
        <el-col :span="3">
          <el-input v-model="listQuery.username" placeholder="请输入店铺名称" clearable></el-input>
        </el-col>
        <el-col :span="3.3">
          <el-select v-model="listQuery.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col  :span="4">
          <el-button type="primary" icon="el-icon-search" @click="searchActivity">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.Withdrawal_time" label="提现时间">提现时间</el-checkbox>
      <el-checkbox v-model="formThead.shop_name" label="店铺名称">店铺名称</el-checkbox>
      <el-checkbox v-model="formThead.store_contact" label="店铺联系人">店铺联系人</el-checkbox>
      <el-checkbox v-model="formThead.contact_number" label="联系电话">联系电话</el-checkbox>
      <el-checkbox v-model="formThead.store_total_performance" label="店铺总业绩">店铺总业绩</el-checkbox>
      <el-checkbox v-model="formThead.the_total_amount_of_platform_collection" label="平台收款总金额">平台收款总金额</el-checkbox>
      <el-checkbox v-model="formThead.transaction_fee_rate" label="交易手续费率">交易手续费率</el-checkbox>
      <el-checkbox v-model="formThead.platform_has_withdrawn_cash" label="平台已提现金额">平台已提现金额</el-checkbox>
      <el-checkbox v-model="formThead.platform_account_balance" label="平台账户剩余额">平台账户剩余额</el-checkbox>
      <el-checkbox v-model="formThead.withdrawal_name" label="提现姓名">提现姓名</el-checkbox>
      <el-checkbox v-model="formThead.the_cash_withdrawal_amount" label="本次提现金额">本次提现金额</el-checkbox>
      <el-checkbox v-model="formThead.withdrawal_status" label="提现状态">提现状态</el-checkbox>
      <el-checkbox v-model="formThead.auditors" label="审核人员">审核人员</el-checkbox>
      <el-checkbox v-model="formThead.review_time" label="审核时间">审核时间</el-checkbox>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column v-if="formThead.Withdrawal_time" label="提现时间" align="center">
        <template slot-scope="{row}">
          <span v-if="row.create_time">{{ newtime(row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.shop_name" label="店铺名称" align="center">
        <template slot-scope="{row}">
          <span v-if="row.amount">{{ row.customer_info.name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.store_contact" label="店铺联系人" align="center">
        <template slot-scope="{row}" >
          <span>{{ row.customer_info.contact }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.contact_number" label="联系电话" align="center">
        <template slot-scope="{row}">
          <span>{{ row.customer_info.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.store_total_performance" label="店铺总业绩" align="center">
        <template slot-scope="{row}">
          <span>{{ row.customer_info.total }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.the_total_amount_of_platform_collection" label="平台收款总金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.customer_info.wx_total }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.transaction_fee_rate" label="交易手续费率" align="center">
        <template slot-scope="{row}">
          <span>{{ row.customer_info.rate_wx }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.platform_has_withdrawn_cash" label="平台已提现金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.customer_info.withdrawal }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.platform_account_balance" label="平台账户剩余额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.customer_info.will_withdrawal }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.withdrawal_name" label="提现姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.re_user_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.the_cash_withdrawal_amount" label="本次提现金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.withdrawal_status" label="提现状态" align="center">
        <template slot-scope="{row}">
          <!-- <span>{{row.status}}</span> -->
          <span v-if="row.status===1" style="color: #409EFF">申请中</span>
          <span v-if="row.status===2" style="color: #40ff96">已提现</span>
          <span v-if="row.status===3" style="color: #ffce40">已拒绝</span>
          <span v-if="row.status===4" style="color: #ff404b">提现失败</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.auditors" label="审核人员" align="center">
        <template slot-scope="{row}">
          <span>{{ row.operater }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.review_time" align="center" label="审核时间">
        <template slot-scope="{row}">
          <span>{{newtime(row.update_time)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.status===1" type="success" plain @click="business_payment(row.id,1)">同意</el-button>
          <el-button v-if="row.status===1" type="warning" plain @click="business_payment(row.id,2)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--页码-->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.listQuery.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.listQuery.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList,business_payment } from '@/api/cashApply'
import store from '@/store'
export default {
  data() {
    return {
      listItemId: null,
      grade_list: [],
      timeRange: [],
      tableKey: 0,
      list: [],
      total: null,
      listLoading: true,
      btnLoading:false,
      select_gender: [{
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      }, {
        value: 0,
        label: '保密'
      }],
      select_status: [
        { label: '启用', value: 0 },
        { label: '禁用', value: 1 }
      ],
      listQuery: {
        username: undefined, // 昵称
        phone: undefined, // 手机
        create_time: undefined, // 注册时间
        end_time: undefined, // 结束时间
        status:'',
        token:'',
        page: 1,
        pagesize: 10
      },
      options: [{
        value: '1',
        label: '申请中'
      }, {
        value: '3',
        label: '已拒绝',
      }, {
        value: '2',
        label: '已提现'
      }, {
        value: '4',
        label: '提现失败'
      }],
      // 显示列表
      formThead: {
        Withdrawal_time: true,//提现时间
        shop_name: true, // 店铺名称
        store_contact: true, // 店铺联系人
        contact_number: true,//联系电话
        store_total_performance: true, // 店铺总业绩
        the_total_amount_of_platform_collection: true, // 平台收款总金额
        transaction_fee_rate: true, // 交易手续费率
        platform_has_withdrawn_cash: true, // 平台已提现金额
        platform_account_balance: true, // 平台账户剩余额
        withdrawal_name: true, // 提现姓名
        the_cash_withdrawal_amount: true, // 本次提现金额
        withdrawal_status: true, // 提现状态
        auditors:false,
        review_time: false, // 审核时间
        
      }
    }
  },
  created() {
    this.getLists()
  },
  methods: {
    searchActivity(){
      this.getLists()
    },
    newtime(num){
      const str=new Date(num*1000).toLocaleString()
      return str;
    },
    //获取火种等级
    handleSizeChange(val) {
      this.listQuery.pagesize = parseInt(val)
      this.getLists()
    },
    handleCurrentChange(val) {
      console.log(val)
      this.listQuery.page = parseInt(val)
      this.getLists()
    },
    getLists() {
      this.listLoading = false
      this.listQuery.token = store.getters.token
      // console.log(this.listQuery.token)
      getList(this.listQuery).then(res => {
        console.log(res.data.data.data,"9527")
        this.listQuery.total=parseInt(res.data.data.total)
        this.listQuery.page=parseInt(res.data.data.current_page)
        this.listQuery.pagesize=parseInt(res.data.data.per_page)
        this.list=res.data.data.data
      })
    },
    bigImg(id) {
      if (id > 0) {
        this.listItemId = id
      } else {
        this.listItemId = null
      }
    },
    
    business_payment(id,status){
      const data={
        token:store.getters.token,
        id:id,
        status:status
      }
      business_payment(data).then(res=>{
        this.$message({
          type:'success',
          message: res.data.msg
        });
      })
    }
  }
}
</script>
<style>
    .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
  .bigImg img{
    max-width: 650px;
    min-width: 235px;
  }
</style>
